import * as mathjs from 'mathjs'
import { getImageByUrl } from '@/utils/getImageByUrl'
import { Dropdown, Image, Space, TableColumnsType, Tooltip, Typography } from 'antd'
import { PurchaseFabricPageDataVO as ITableData } from './types'
import { DownOutlined, EditOutlined } from '@ant-design/icons'
import { ORDER_STATUS_TEXT } from '@/constant/purchase'
import { IMenuItem } from './index'
import PermissionLink from '@/components/PermissionLink'
export const useIndexColumns = ({
  isRoot,
  onEdit,
  FactoryOrderEditUnitUsedNum,
  FactoryOrderEditOrderQty,
  FactoryOrderEditIntentDate,
  FactoryOrderEditOrderRemark,
  FactoryOrderEditFabricSupplier,
  operateItems,
  handleMenuClick,
  onViewLogs,
}: {
  isRoot: boolean
  onEdit: (info: ITableData, type: 1 | 2 | 3 | 4 | 5) => void
  FactoryOrderEditUnitUsedNum: boolean
  FactoryOrderEditOrderQty: boolean
  FactoryOrderEditIntentDate: boolean
  FactoryOrderEditOrderRemark: boolean
  FactoryOrderEditFabricSupplier: boolean
  operateItems: IMenuItem[]
  handleMenuClick: (rows: ITableData, key: any) => void
  onViewLogs: (rows: ITableData) => void
}): TableColumnsType<ITableData> => [
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    width: 310,
    fixed: 'left',
    render: (_, rows) => {
      return (
        <Space size="middle">
          {operateItems.length > 0 && (
            <Dropdown menu={{ items: operateItems, onClick: (key) => handleMenuClick(rows, key) }}>
              <a>
                更多操作
                <DownOutlined style={{ marginLeft: 2 }} />
              </a>
            </Dropdown>
          )}
          <PermissionLink
            permission="FactoryOrderReplyFabricCode"
            onClick={() => handleMenuClick(rows, { key: 'FactoryOrderReplyFabricCode' })}
          >
            汇报成品色布
          </PermissionLink>
          <PermissionLink
            permission="FactoryOrderSendGoods"
            onClick={() => handleMenuClick(rows, { key: 'FactoryOrderSendGoods' })}
          >
            发货
          </PermissionLink>
          <PermissionLink permission="FactoryOrderViewLogs" onClick={() => onViewLogs(rows)}>
            查看日志
          </PermissionLink>
        </Space>
      )
    },
  },
  {
    title: '开发季',
    dataIndex: 'seasonName',
    key: 'seasonName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center',
    width: 250,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <div>
          <span>{info ? <Tooltip title={info}>{info || '-'}</Tooltip> : '-'}</span>
          {!rows.colorFabricFinishQty && FactoryOrderEditFabricSupplier && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 5)}
              />
            </Tooltip>
          )}
        </div>
      )
    },
  },
  {
    title: '成衣供应商',
    dataIndex: 'productSupplierName',
    key: 'productSupplierName',
    align: 'center',
    width: 250,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? <Tooltip title={info}>{info || '-'}</Tooltip> : '-'
    },
  },
  {
    title: '大类',
    dataIndex: 'firstClassName',
    key: 'firstClassName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式图',
    dataIndex: 'spuImage',
    key: 'spuImage',
    align: 'center',
    width: 120,
    render: (info) => {
      return (
        <Image rootClassName="table_image" width={40} height={40} src={info} fallback={getImageByUrl('moren.png')} />
      )
    },
  },
  {
    title: '设计编码',
    dataIndex: 'designCode',
    key: 'designCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式编码',
    dataIndex: 'spuCode',
    key: 'spuCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '款式色',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料编码',
    dataIndex: 'fabricCode',
    key: 'fabricCode',
    align: 'center',
    width: 110,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料名称',
    dataIndex: 'fabricName',
    key: 'fabricName',
    align: 'center',
    width: 120,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? <Tooltip title={info}>{info || '-'}</Tooltip> : '-'
    },
  },
  {
    title: '面种编码',
    dataIndex: 'fabricTypeCode',
    key: 'fabricTypeCode',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '当前可用库存-坯布',
    dataIndex: 'baseFabricStock',
    key: 'baseFabricStock',
    align: 'center',
    width: 150,
    render: (info, rows) => {
      return info ? info + (rows?.fabricUnit || '') : '-'
    },
  },
  {
    title: '使用部位',
    dataIndex: 'useSite',
    key: 'useSite',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面料色',
    dataIndex: 'fabricColorDetailName',
    key: 'fabricColorDetailName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '色布编码',
    dataIndex: 'colorFabricCode',
    key: 'colorFabricCode',
    align: 'center',
    width: 160,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '关联制衣订单',
    dataIndex: 'purchaseOrderCode',
    key: 'purchaseOrderCode',
    align: 'center',
    width: 270,
    render: (info, rows) => {
      return (
        <div style={{ color: rows?.purchaseOrderStatus == 4 ? 'red' : '' }}>
          <span style={{ marginRight: 3 }}>{info}</span>
          <span>
            {rows?.purchaseOrderStatus != null && rows?.purchaseOrderStatus >= 0
              ? '(' + ORDER_STATUS_TEXT[rows?.purchaseOrderStatus] + ')'
              : ''}
          </span>
        </div>
      )
    },
  },
  {
    title: '面料下单时间',
    dataIndex: 'fabricOrderDate',
    key: 'fabricOrderDate',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '成衣下单件数',
    dataIndex: 'orderQty',
    key: 'orderQty',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '单件用量',
    dataIndex: 'unitUsedNum',
    key: 'unitUsedNum',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return (
        <span style={{ fontWeight: 800 }}>
          {info ? info + (rows?.fabricUnit || '') : '-'}
          {FactoryOrderEditUnitUsedNum && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 1)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '理论用量',
    dataIndex: 'abc1',
    key: 'abc1',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return (
        mathjs.format(mathjs.multiply(mathjs.bignumber(rows.orderQty || 0), mathjs.bignumber(rows?.unitUsedNum || 0)), {
          notation: 'fixed',
          precision: 2,
        }) + (rows?.fabricUnit || '')
      )
    },
  },
  {
    title: '色布实际下单量',
    dataIndex: 'colorFabricOrderQty',
    key: 'colorFabricOrderQty',
    align: 'center',
    width: 120,
    render: (info, rows) => {
      return (
        <span style={{ fontWeight: 800 }}>
          {info ? info + (rows?.fabricUnit || '') : '-'}
          {FactoryOrderEditOrderQty && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 2)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '面料单价',
    dataIndex: 'fabricUnitPrice',
    key: 'fabricUnitPrice',
    align: 'center',
    width: 100,
    hidden: !isRoot,
    render: (info, rows) => {
      return info ? info + (rows?.fabricUnit ? '/' + rows?.fabricUnit : '') : '-'
    },
  },
  {
    title: '面料总价',
    dataIndex: 'totalPrice',
    key: 'totalPrice',
    align: 'center',
    width: 100,
    hidden: !isRoot,
    render: (_, rows) => {
      return (
        mathjs.format(
          mathjs.multiply(
            mathjs.bignumber(rows.colorFabricOrderQty || 0),
            mathjs.bignumber(rows?.fabricUnitPrice || 0),
          ),
          {
            notation: 'fixed',
            precision: 2,
          },
        ) + '元'
      )
    },
  },
  {
    title: '面料备注',
    dataIndex: 'fabricRemark',
    key: 'fabricRemark',
    align: 'center',
    width: 120,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '制衣厂意向交期',
    dataIndex: 'intentDate',
    key: 'intentDate',
    align: 'center',
    width: 120,
    render: (info, rows) => {
      return (
        <span>
          {info || '-'}
          {FactoryOrderEditIntentDate && !rows?.replyDate && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 3)}
              />
            </Tooltip>
          )}
        </span>
      )
    },
  },
  {
    title: '面料厂回复交期',
    dataIndex: 'replyDate',
    key: 'replyDate',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '预计到厂时间',
    dataIndex: 'fabricPlanTime',
    key: 'fabricPlanTime',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '成品量-色布',
    dataIndex: 'colorFabricFinishQty',
    key: 'colorFabricFinishQty',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return (
        <span style={{ fontWeight: 800, color: 'var(--primary-color)' }}>
          {info ? info + (rows?.fabricUnit || '') : '-'}
        </span>
      )
    },
  },
  {
    title: '生产备注',
    dataIndex: 'produceRemark',
    key: 'produceRemark',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return info ? (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      ) : (
        '-'
      )
    },
  },
  {
    title: '实际交期',
    dataIndex: 'actualDate',
    key: 'actualDate',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '实际交货量',
    dataIndex: 'actualQty',
    key: 'actualQty',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return (
        <span style={{ fontWeight: 800, color: 'var(--primary-color)' }}>
          {info ? info + (rows?.fabricUnit || '') : '-'}
        </span>
      )
    },
  },
  {
    title: '超短装',
    dataIndex: 'calc',
    key: 'calc',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return (
        <span style={{ fontWeight: 800, color: 'var(--primary-color)' }}>
          {rows?.actualQty && rows?.actualQty != 0
            ? mathjs.format(
                mathjs.divide(
                  mathjs.bignumber((rows?.actualQty || 0) - (rows?.colorFabricOrderQty || 0)),
                  mathjs.bignumber(rows?.actualQty ? rows?.actualQty / 100 : 0),
                ),
                {
                  notation: 'fixed',
                  precision: 2,
                },
              ) + '%'
            : '0'}
        </span>
      )
    },
  },
  {
    title: '订单备注',
    dataIndex: 'orderRemark',
    key: 'orderRemark',
    align: 'center',
    width: 100,
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {info ? (
            <Tooltip title={info}>
              <div style={{ maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {info || '-'}
              </div>
            </Tooltip>
          ) : (
            '-'
          )}
          {FactoryOrderEditOrderRemark && (
            <Tooltip placement="top" title="编辑">
              <EditOutlined
                style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 4 }}
                onClick={() => onEdit(rows, 4)}
              />
            </Tooltip>
          )}
        </div>
      )
    },
  },
]
